<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>&ast;&ast;VueX&#x4f7f;&#x7528;&#x624b;&#x518c;&ast;&ast;</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

/* From extension ms-toolsai.jupyter */
/* These classnames are inherited from bootstrap, but are present in most notebook renderers */

.alert {
    width: auto;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.alert > *:last-child {
    margin-bottom: 0;
}
#preview > .alert:last-child {
    /* Prevent this being set to zero by the default notebook stylesheet */
    padding-bottom: 1em;
}

.alert-success {
    /* Note there is no suitable color available, so we just copy "info" */
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-info {
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-warning {
    background-color: var(--theme-warning-background);
    color: var(--theme-warning-foreground);
}
.alert-danger {
    background-color: var(--theme-error-background);
    color: var(--theme-error-foreground);
}

</style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
        
    </head>
    <body class="vscode-body vscode-light">
        <ul>
<li><a href="#vuex%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C"><strong>VueX使用手册</strong></a>
<ul>
<li><a href="#%E5%AF%BC%E5%85%A5vuex"><strong>导入VueX</strong></a></li>
<li><a href="#%E4%BD%BF%E7%94%A8vuex"><strong>使用Vuex</strong></a>
<ul>
<li><a href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><strong>基本使用</strong></a>
<ul>
<li><a href="#js%E9%83%A8%E5%88%86"><strong>js部分</strong></a></li>
<li><a href="#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E8%AE%BF%E9%97%AE-state%E6%95%B0%E6%8D%AE"><strong>在组件中访问 <code>state</code>数据</strong></a></li>
<li><a href="#%E4%BF%AE%E6%94%B9state-%E7%9A%84%E6%95%B0%E6%8D%AE"><strong>修改state 的数据</strong></a></li>
<li><a href="#getter"><strong>Getter</strong></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="vuex使用手册"><strong>VueX使用手册</strong></h1>
<h2 id="导入vuex"><strong>导入VueX</strong></h2>
<blockquote></blockquote>
<h2 id="使用vuex"><strong>使用Vuex</strong></h2>
<h3 id="基本使用"><strong>基本使用</strong></h3>
<h4 id="js部分"><strong>js部分</strong></h4>
<p>创建
**<code>store.js</code>**文件</p>
<pre><code class="language-js"><span class="hljs-comment">/* 导入 Vue 和 VueX */</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vuex</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span>

<span class="hljs-comment">/* 把 Vuex 安装为 Vue的插件 */</span>
<span class="hljs-title class_">Vue</span>.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Vuex</span>)

<span class="hljs-comment">/* 创建 Store  对象*/</span>
<span class="hljs-keyword">const</span> store = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Vuex</span>.<span class="hljs-title class_">Store</span>({
   <span class="hljs-attr">state</span>:{},
   <span class="hljs-attr">mutations</span>:{},
   <span class="hljs-attr">actions</span>:{},
   <span class="hljs-attr">getter</span>:{},
   <span class="hljs-attr">modules</span>:{}
   <span class="hljs-comment">/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；其中有五个属性，state，getters，mutations,actions，modules；
    (1) state：vuex的基本数据，用来存储变量
    (2) getters：从基本数据(state)派生的数据，相当于state的计算属性
    (3) mutations： mutation同步操作，提交更新数据的方法，是通过修改state来直接变更状态
    (4) actions：Action异步操作，和mutation的功能大体相同，不同的是Action提交的mutation，而不是直接变更状态；action先会执行异步操作再去调用mutation，随后才跟新state；
    (5) modules:模块化vuex，能让每个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理 */</span>
})

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> store
</code></pre>
<p>在**<code>main.js</code>**中</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./App&#x27;</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/store/store.js&#x27;</span>
<span class="hljs-title class_">Vue</span>.<span class="hljs-property">config</span>.<span class="hljs-property">productionTip</span> = <span class="hljs-literal">false</span>
<span class="hljs-title class_">App</span>.<span class="hljs-property">mpType</span> = <span class="hljs-string">&#x27;app&#x27;</span>
<span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Vue</span>({
    ...<span class="hljs-title class_">App</span>,
	store
})
app.$mount()

</code></pre>
<h4 id="在组件中访问-state数据"><strong>在组件中访问 <code>state</code>数据</strong></h4>
<p>方式一</p>
<blockquote>
<<<<<<< HEAD
<p>在差值表达式<code>{{}}</code> 中访问直接使用<code>{{$store.state.要使用的数据}}</code></p>
=======
<p>在差值表达式<code>{{}}</code> 中访问直接使用<code>{{$store.要使用的数据}}</code></p>
>>>>>>> fde85743b7bdb7a452801ce6b176de577a2dab8d
</blockquote>
<p>方式二</p>
<blockquote>
<p>使用 <code>import { mapState } from 'vuex'</code> 导入<code>mapState()</code>函数 <br/> 然后在计算属性<code>computed</code>中使用结构赋值<code>...mapState(['数据名'])</code>
然后就可以直接在差值表达式中使用这个<code>数据名</code></p>
</blockquote>
<h4 id="修改state-的数据"><strong>修改state 的数据</strong></h4>
<p><strong>同步方式</strong></p>
<p>方式一</p>
<blockquote>
<<<<<<< HEAD
<p>直接修改 <code>this.$state.state.数据名 = 新数据</code>  可以这样用但是不推荐</p>
=======
<p>直接修改 <code>this.$state.数据名 = 新数据</code>  可以这样用但是不推荐</p>
>>>>>>> fde85743b7bdb7a452801ce6b176de577a2dab8d
</blockquote>
<p>方式二</p>
<blockquote>
<p>使用 <code>mutations</code>在里面声明事件处理函数</p>
</blockquote>
<pre><code class="language-javascript">{
    <span class="hljs-attr">state</span>:{ 
        num
    },
    <span class="hljs-attr">mutations</span>:{
        <span class="hljs-title function_">add</span>(<span class="hljs-params">state,参数列表...</span>){<span class="hljs-comment">//事件处理函数 第一个参数是自己的state 后面是传入的参数</span>
            state.<span class="hljs-property">num</span>=a
        },
        <span class="hljs-title function_">del</span>(<span class="hljs-params">state,参数列表...</span>){<span class="hljs-comment">//事件处理函数</span>
            state.<span class="hljs-property">num</span>=a
        }
 },
}
 
</code></pre>
<blockquote>
<p>然后在组件代码中使用 <code>this.$State.commit('事件函数名',参数列表...)</code></p>
</blockquote>
<p><strong>异步方式</strong></p>
<pre><code class="language-js"><span class="hljs-comment">//在 action中</span>
action{
    异步方法(context,参数列表...){
        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>{
            context.<span class="hljs-title function_">commit</span>(<span class="hljs-string">&#x27;事件方法名&#x27;</span>,参数列表...)
        },<span class="hljs-number">1000</span>)
    },...
}
<span class="hljs-comment">//在 组件中 调用</span>
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">$store</span>.<span class="hljs-title function_">dispatch</span>(<span class="hljs-string">&#x27;异步方法名&#x27;</span>,参数列表...)
    <span class="hljs-comment">//或者</span>
    <span class="hljs-keyword">import</span> { mapActions } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span>
    <span class="hljs-attr">methods</span>:{
        <span class="hljs-title function_">mapActions</span>([<span class="hljs-string">&#x27;异步方法名&#x27;</span>,<span class="hljs-string">&#x27;异步方法名&#x27;</span>])
    }
</code></pre>
<h4 id="getter"><strong>Getter</strong></h4>
<blockquote>
<p>类似于计算属性</p>
</blockquote>
<p>使用getter</p>
<pre><code class="language-js"><span class="hljs-comment">//第一种</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-property">$store</span>.<span class="hljs-property">getters</span>.名
<span class="hljs-comment">//第二种</span>
<span class="hljs-keyword">import</span> { mapGetters } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vuex&#x27;</span>

<span class="hljs-attr">computed</span>:{
    ...<span class="hljs-title function_">mapGetters</span>([<span class="hljs-string">&#x27;getter名&#x27;</span>])
}
</code></pre>

        <script async src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
        
    </body>
    </html>